<!DOCTYPE html>
<html>
<head>
  <title>Framework7 Icons v2.3.0 Cheatsheet</title>
  <link href="../css/framework7-icons.css" rel="stylesheet" type="text/css" />
  <style>
    {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    body {
      background: #fff;
      color: #333;
      font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: 0;
    }
    header {
      text-align: center;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
      overflow: hidden;
      padding: 20px 0;
    }
    header h1 {
      font-size: 21px;
      font-weight: 400;
    }
    .center {
      margin-left: auto;
      margin-right: auto;
      max-width: 960px;
    }
    .icons {
      overflow: hidden;
    }
    .content .icon-cell .f7-icons {
      cursor: pointer;
    }
    .content {
      padding-bottom: 250px;
    }
    .icons .icon-cell {
      float: left;
      width: calc(100% / 7);
      text-align: center;
      height: 100px;
      margin-top: 30px;
    }
    .icons .icon-name,
    .icons .icon-size {
      display: block;
      font-size: 12px;
      color: #666;
      margin-top: 10px;
    }
    .f7-icons.size-14 {
      font-size: 14px;
    }
    .f7-icons.size-20 {
      font-size: 20px;
    }
    .f7-icons.size-24 {
      font-size: 24px;
    }
    .f7-icons.size-28 {
      font-size: 28px;
    }
    .f7-icons.size-32 {
      font-size: 32px;
    }
    .f7-icons.size-56 {
      font-size: 56px;
    }
    .f7-icons.size-112 {
      font-size: 112px;
    }
    .icon-preview {
      box-shadow: 0px -10px 20px rgba(0,0,0,0.3);
      background: #fff;
      position: fixed;
      bottom: 0;
      left: 50%;
      margin-left: -480px;
      z-index: 100;
      width: 960px;
      display: none;
    }
    @media (max-width: 960px) {
      .icon-preview {
        left: 0;
        width: 100%;
        margin-left: 0;
      }
    }
    .icon-preview .icons {
      font-size: 0;
      padding-bottom: 10px;
    }
    .icon-preview .icon-cell {
      float: none;
      display: inline-block;
      margin: 0;
      vertical-align: bottom;
      height: auto;
    }
    .icon-preview .icon-preview-name {
      font-size: 18px;
      padding: 10px;
      border-bottom: 1px solid #eee;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="center">
    <header>
      <h1>Framework7 Icons v2.3.0 Cheatsheet, <b>378</b> icons:</h1>
    </header>
    <div class="content">
      <div class="icons">
        <div class="icon-cell">
  <i class="f7-icons size-28">abc</i>
  <span class="icon-name">abc</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">abc_square</i>
  <span class="icon-name">abc_square</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">abc_square_fill</i>
  <span class="icon-name">abc_square_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">add</i>
  <span class="icon-name">add</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">add_round</i>
  <span class="icon-name">add_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">add_round_fill</i>
  <span class="icon-name">add_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">alarm</i>
  <span class="icon-name">alarm</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">alarm_fill</i>
  <span class="icon-name">alarm_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">albums</i>
  <span class="icon-name">albums</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">albums_fill</i>
  <span class="icon-name">albums_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">alert</i>
  <span class="icon-name">alert</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">alert_fill</i>
  <span class="icon-name">alert_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_down</i>
  <span class="icon-name">arrow_down</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_down_round_fill</i>
  <span class="icon-name">arrow_down_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_left</i>
  <span class="icon-name">arrow_left</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_left_round_fill</i>
  <span class="icon-name">arrow_left_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_right</i>
  <span class="icon-name">arrow_right</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_right_round_fill</i>
  <span class="icon-name">arrow_right_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_up</i>
  <span class="icon-name">arrow_up</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">arrow_up_round_fill</i>
  <span class="icon-name">arrow_up_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">at</i>
  <span class="icon-name">at</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">at_round</i>
  <span class="icon-name">at_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">at_round_fill</i>
  <span class="icon-name">at_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">attachment</i>
  <span class="icon-name">attachment</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bag</i>
  <span class="icon-name">bag</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bag_fill</i>
  <span class="icon-name">bag_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">barcode</i>
  <span class="icon-name">barcode</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">barcode_fill</i>
  <span class="icon-name">barcode_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bars</i>
  <span class="icon-name">bars</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bars_chart</i>
  <span class="icon-name">bars_chart</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bars_chart_round</i>
  <span class="icon-name">bars_chart_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bars_chart_round_fill</i>
  <span class="icon-name">bars_chart_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bars_chart_square</i>
  <span class="icon-name">bars_chart_square</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bars_chart_square_fill</i>
  <span class="icon-name">bars_chart_square_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bell</i>
  <span class="icon-name">bell</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bell_fill</i>
  <span class="icon-name">bell_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bell_off</i>
  <span class="icon-name">bell_off</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bitcoin</i>
  <span class="icon-name">bitcoin</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bitcoin_round</i>
  <span class="icon-name">bitcoin_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bitcoin_round_fill</i>
  <span class="icon-name">bitcoin_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bolt</i>
  <span class="icon-name">bolt</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bolt_fill</i>
  <span class="icon-name">bolt_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bolt_round</i>
  <span class="icon-name">bolt_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bolt_round_fill</i>
  <span class="icon-name">bolt_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">book</i>
  <span class="icon-name">book</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">book_fill</i>
  <span class="icon-name">book_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bookmark</i>
  <span class="icon-name">bookmark</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bookmark_fill</i>
  <span class="icon-name">bookmark_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">box</i>
  <span class="icon-name">box</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">box_fill</i>
  <span class="icon-name">box_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">briefcase</i>
  <span class="icon-name">briefcase</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">briefcase_fill</i>
  <span class="icon-name">briefcase_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bulb</i>
  <span class="icon-name">bulb</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">bulb_fill</i>
  <span class="icon-name">bulb_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">business</i>
  <span class="icon-name">business</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">business_fill</i>
  <span class="icon-name">business_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">calendar</i>
  <span class="icon-name">calendar</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">calendar_fill</i>
  <span class="icon-name">calendar_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">calendar_today</i>
  <span class="icon-name">calendar_today</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">calendar_today_fill</i>
  <span class="icon-name">calendar_today_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">camera</i>
  <span class="icon-name">camera</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">camera_fill</i>
  <span class="icon-name">camera_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">camera_round</i>
  <span class="icon-name">camera_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">camera_round_fill</i>
  <span class="icon-name">camera_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">card</i>
  <span class="icon-name">card</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">card_fill</i>
  <span class="icon-name">card_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">cat</i>
  <span class="icon-name">cat</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chat</i>
  <span class="icon-name">chat</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chat_bubble</i>
  <span class="icon-name">chat_bubble</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chat_bubble_fill</i>
  <span class="icon-name">chat_bubble_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chat_fill</i>
  <span class="icon-name">chat_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">check</i>
  <span class="icon-name">check</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">check_round</i>
  <span class="icon-name">check_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">check_round_fill</i>
  <span class="icon-name">check_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_down</i>
  <span class="icon-name">chevron_down</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_down_round</i>
  <span class="icon-name">chevron_down_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_down_round_fill</i>
  <span class="icon-name">chevron_down_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_left</i>
  <span class="icon-name">chevron_left</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_left_round</i>
  <span class="icon-name">chevron_left_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_left_round_fill</i>
  <span class="icon-name">chevron_left_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_right</i>
  <span class="icon-name">chevron_right</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_right_round</i>
  <span class="icon-name">chevron_right_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_right_round_fill</i>
  <span class="icon-name">chevron_right_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_up</i>
  <span class="icon-name">chevron_up</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_up_round</i>
  <span class="icon-name">chevron_up_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">chevron_up_round_fill</i>
  <span class="icon-name">chevron_up_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">circle</i>
  <span class="icon-name">circle</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">circle_fill</i>
  <span class="icon-name">circle_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">circle_half</i>
  <span class="icon-name">circle_half</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">close</i>
  <span class="icon-name">close</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">close_round</i>
  <span class="icon-name">close_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">close_round_fill</i>
  <span class="icon-name">close_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">cloud</i>
  <span class="icon-name">cloud</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">cloud_download</i>
  <span class="icon-name">cloud_download</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">cloud_download_fill</i>
  <span class="icon-name">cloud_download_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">cloud_fill</i>
  <span class="icon-name">cloud_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">cloud_upload</i>
  <span class="icon-name">cloud_upload</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">cloud_upload_fill</i>
  <span class="icon-name">cloud_upload_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">collection</i>
  <span class="icon-name">collection</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">collection_fill</i>
  <span class="icon-name">collection_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">color_filter</i>
  <span class="icon-name">color_filter</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">color_filter_fill</i>
  <span class="icon-name">color_filter_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">compass</i>
  <span class="icon-name">compass</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">compass_fill</i>
  <span class="icon-name">compass_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">compose</i>
  <span class="icon-name">compose</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">compose_fill</i>
  <span class="icon-name">compose_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">data</i>
  <span class="icon-name">data</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">data_fill</i>
  <span class="icon-name">data_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">delete</i>
  <span class="icon-name">delete</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">delete_round</i>
  <span class="icon-name">delete_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">delete_round_fill</i>
  <span class="icon-name">delete_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">desktop</i>
  <span class="icon-name">desktop</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document</i>
  <span class="icon-name">document</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_chart</i>
  <span class="icon-name">document_chart</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_chart_fill</i>
  <span class="icon-name">document_chart_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_check</i>
  <span class="icon-name">document_check</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_check_fill</i>
  <span class="icon-name">document_check_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_fill</i>
  <span class="icon-name">document_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_person</i>
  <span class="icon-name">document_person</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_person_fill</i>
  <span class="icon-name">document_person_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_text</i>
  <span class="icon-name">document_text</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">document_text_fill</i>
  <span class="icon-name">document_text_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">dog</i>
  <span class="icon-name">dog</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">download</i>
  <span class="icon-name">download</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">download_fill</i>
  <span class="icon-name">download_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">download_round</i>
  <span class="icon-name">download_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">download_round_fill</i>
  <span class="icon-name">download_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">drawer</i>
  <span class="icon-name">drawer</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">drawer_fill</i>
  <span class="icon-name">drawer_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">drawers</i>
  <span class="icon-name">drawers</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">drawers_fill</i>
  <span class="icon-name">drawers_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">edit</i>
  <span class="icon-name">edit</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">email</i>
  <span class="icon-name">email</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">email_fill</i>
  <span class="icon-name">email_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">enter</i>
  <span class="icon-name">enter</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">enter_fill</i>
  <span class="icon-name">enter_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">enter_round</i>
  <span class="icon-name">enter_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">enter_round_fill</i>
  <span class="icon-name">enter_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">exit</i>
  <span class="icon-name">exit</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">exit_fill</i>
  <span class="icon-name">exit_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">exit_round</i>
  <span class="icon-name">exit_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">exit_round_fill</i>
  <span class="icon-name">exit_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">eye</i>
  <span class="icon-name">eye</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">eye_fill</i>
  <span class="icon-name">eye_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">eye_off</i>
  <span class="icon-name">eye_off</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">fastforward</i>
  <span class="icon-name">fastforward</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">fastforward_fill</i>
  <span class="icon-name">fastforward_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">fastforward_round</i>
  <span class="icon-name">fastforward_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">fastforward_round_fill</i>
  <span class="icon-name">fastforward_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">favorites</i>
  <span class="icon-name">favorites</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">favorites_alt</i>
  <span class="icon-name">favorites_alt</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">favorites_alt_fill</i>
  <span class="icon-name">favorites_alt_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">favorites_fill</i>
  <span class="icon-name">favorites_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">film</i>
  <span class="icon-name">film</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">film_fill</i>
  <span class="icon-name">film_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">filter</i>
  <span class="icon-name">filter</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">fire</i>
  <span class="icon-name">fire</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">fire_fill</i>
  <span class="icon-name">fire_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">flag</i>
  <span class="icon-name">flag</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">flag_fill</i>
  <span class="icon-name">flag_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">folder</i>
  <span class="icon-name">folder</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">folder_fill</i>
  <span class="icon-name">folder_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">forward</i>
  <span class="icon-name">forward</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">forward_fill</i>
  <span class="icon-name">forward_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">gamepad</i>
  <span class="icon-name">gamepad</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">gear</i>
  <span class="icon-name">gear</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">gear_fill</i>
  <span class="icon-name">gear_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">gift</i>
  <span class="icon-name">gift</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">gift_fill</i>
  <span class="icon-name">gift_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">graph_round</i>
  <span class="icon-name">graph_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">graph_round_fill</i>
  <span class="icon-name">graph_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">graph_square</i>
  <span class="icon-name">graph_square</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">graph_square_fill</i>
  <span class="icon-name">graph_square_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">hand</i>
  <span class="icon-name">hand</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">hand_alt</i>
  <span class="icon-name">hand_alt</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">heart</i>
  <span class="icon-name">heart</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">heart_fill</i>
  <span class="icon-name">heart_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">help</i>
  <span class="icon-name">help</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">help_round</i>
  <span class="icon-name">help_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">help_round_fill</i>
  <span class="icon-name">help_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">home</i>
  <span class="icon-name">home</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">home_fill</i>
  <span class="icon-name">home_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">images</i>
  <span class="icon-name">images</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">images_fill</i>
  <span class="icon-name">images_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">infinite</i>
  <span class="icon-name">infinite</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">info</i>
  <span class="icon-name">info</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">info_round</i>
  <span class="icon-name">info_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">info_round_fill</i>
  <span class="icon-name">info_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">keyboard</i>
  <span class="icon-name">keyboard</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">keyboard_fill</i>
  <span class="icon-name">keyboard_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">laptop</i>
  <span class="icon-name">laptop</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">layers</i>
  <span class="icon-name">layers</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">layers_alt</i>
  <span class="icon-name">layers_alt</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">layers_alt_fill</i>
  <span class="icon-name">layers_alt_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">layers_fill</i>
  <span class="icon-name">layers_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">library</i>
  <span class="icon-name">library</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">library_fill</i>
  <span class="icon-name">library_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">link</i>
  <span class="icon-name">link</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">list</i>
  <span class="icon-name">list</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">list_fill</i>
  <span class="icon-name">list_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">lock</i>
  <span class="icon-name">lock</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">lock_fill</i>
  <span class="icon-name">lock_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_android</i>
  <span class="icon-name">logo_android</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_android_text</i>
  <span class="icon-name">logo_android_text</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_apple</i>
  <span class="icon-name">logo_apple</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_facebook</i>
  <span class="icon-name">logo_facebook</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_github</i>
  <span class="icon-name">logo_github</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_google</i>
  <span class="icon-name">logo_google</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_google_text</i>
  <span class="icon-name">logo_google_text</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_googleplus</i>
  <span class="icon-name">logo_googleplus</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_instagram</i>
  <span class="icon-name">logo_instagram</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_ios</i>
  <span class="icon-name">logo_ios</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_linkedin</i>
  <span class="icon-name">logo_linkedin</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_macos</i>
  <span class="icon-name">logo_macos</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_microsoft</i>
  <span class="icon-name">logo_microsoft</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_rss</i>
  <span class="icon-name">logo_rss</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_twitter</i>
  <span class="icon-name">logo_twitter</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">logo_windows</i>
  <span class="icon-name">logo_windows</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">map</i>
  <span class="icon-name">map</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">menu</i>
  <span class="icon-name">menu</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">message</i>
  <span class="icon-name">message</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">message_fill</i>
  <span class="icon-name">message_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">mic</i>
  <span class="icon-name">mic</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">mic_fill</i>
  <span class="icon-name">mic_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">mic_off</i>
  <span class="icon-name">mic_off</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">mic_round</i>
  <span class="icon-name">mic_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">mic_round_fill</i>
  <span class="icon-name">mic_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_dollar</i>
  <span class="icon-name">money_dollar</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_dollar_round</i>
  <span class="icon-name">money_dollar_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_dollar_round_fill</i>
  <span class="icon-name">money_dollar_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_euro</i>
  <span class="icon-name">money_euro</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_euro_round</i>
  <span class="icon-name">money_euro_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_euro_round_fill</i>
  <span class="icon-name">money_euro_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_pound</i>
  <span class="icon-name">money_pound</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_pound_round</i>
  <span class="icon-name">money_pound_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_pound_round_fill</i>
  <span class="icon-name">money_pound_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_rubl</i>
  <span class="icon-name">money_rubl</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_rubl_round</i>
  <span class="icon-name">money_rubl_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_rubl_round_fill</i>
  <span class="icon-name">money_rubl_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_yen</i>
  <span class="icon-name">money_yen</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_yen_round</i>
  <span class="icon-name">money_yen_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">money_yen_round_fill</i>
  <span class="icon-name">money_yen_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more</i>
  <span class="icon-name">more</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more_fill</i>
  <span class="icon-name">more_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more_round</i>
  <span class="icon-name">more_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more_round_fill</i>
  <span class="icon-name">more_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more_vertical</i>
  <span class="icon-name">more_vertical</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more_vertical_fill</i>
  <span class="icon-name">more_vertical_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more_vertical_round</i>
  <span class="icon-name">more_vertical_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">more_vertical_round_fill</i>
  <span class="icon-name">more_vertical_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">navigation</i>
  <span class="icon-name">navigation</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">navigation_fill</i>
  <span class="icon-name">navigation_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">navigation_round</i>
  <span class="icon-name">navigation_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">navigation_round_fill</i>
  <span class="icon-name">navigation_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">numbers</i>
  <span class="icon-name">numbers</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">numbers_square</i>
  <span class="icon-name">numbers_square</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">numbers_square_fill</i>
  <span class="icon-name">numbers_square_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">paper_plane</i>
  <span class="icon-name">paper_plane</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">paper_plane_fill</i>
  <span class="icon-name">paper_plane_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">pause</i>
  <span class="icon-name">pause</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">pause_fill</i>
  <span class="icon-name">pause_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">pause_round</i>
  <span class="icon-name">pause_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">pause_round_fill</i>
  <span class="icon-name">pause_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">paw</i>
  <span class="icon-name">paw</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">person</i>
  <span class="icon-name">person</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">person_round</i>
  <span class="icon-name">person_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">person_round_fill</i>
  <span class="icon-name">person_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">persons</i>
  <span class="icon-name">persons</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">persons_round</i>
  <span class="icon-name">persons_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">persons_round_fill</i>
  <span class="icon-name">persons_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">phone</i>
  <span class="icon-name">phone</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">phone_fill</i>
  <span class="icon-name">phone_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">phone_landscape</i>
  <span class="icon-name">phone_landscape</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">phone_portrait</i>
  <span class="icon-name">phone_portrait</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">phone_round</i>
  <span class="icon-name">phone_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">phone_round_fill</i>
  <span class="icon-name">phone_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">photos</i>
  <span class="icon-name">photos</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">photos_fill</i>
  <span class="icon-name">photos_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">piano</i>
  <span class="icon-name">piano</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">pie_chart</i>
  <span class="icon-name">pie_chart</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">pie_chart_fill</i>
  <span class="icon-name">pie_chart_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">placemark</i>
  <span class="icon-name">placemark</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">placemark_fill</i>
  <span class="icon-name">placemark_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">play</i>
  <span class="icon-name">play</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">play_fill</i>
  <span class="icon-name">play_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">play_round</i>
  <span class="icon-name">play_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">play_round_fill</i>
  <span class="icon-name">play_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">poultry_leg</i>
  <span class="icon-name">poultry_leg</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">print</i>
  <span class="icon-name">print</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">qrcode</i>
  <span class="icon-name">qrcode</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">radio</i>
  <span class="icon-name">radio</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">redo</i>
  <span class="icon-name">redo</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">refresh</i>
  <span class="icon-name">refresh</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">refresh_round</i>
  <span class="icon-name">refresh_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">refresh_round_fill</i>
  <span class="icon-name">refresh_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">reload</i>
  <span class="icon-name">reload</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">reload_round</i>
  <span class="icon-name">reload_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">reload_round_fill</i>
  <span class="icon-name">reload_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">reply</i>
  <span class="icon-name">reply</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">reply_fill</i>
  <span class="icon-name">reply_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">rewind</i>
  <span class="icon-name">rewind</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">rewind_fill</i>
  <span class="icon-name">rewind_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">rewind_round</i>
  <span class="icon-name">rewind_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">rewind_round_fill</i>
  <span class="icon-name">rewind_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">rocket</i>
  <span class="icon-name">rocket</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">rocket_fill</i>
  <span class="icon-name">rocket_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">save</i>
  <span class="icon-name">save</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">scissors</i>
  <span class="icon-name">scissors</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">search</i>
  <span class="icon-name">search</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">settings</i>
  <span class="icon-name">settings</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">settings_fill</i>
  <span class="icon-name">settings_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">share</i>
  <span class="icon-name">share</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">share_fill</i>
  <span class="icon-name">share_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">shopping_cart</i>
  <span class="icon-name">shopping_cart</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort</i>
  <span class="icon-name">sort</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_down</i>
  <span class="icon-name">sort_down</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_down_round</i>
  <span class="icon-name">sort_down_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_down_round_fill</i>
  <span class="icon-name">sort_down_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_round</i>
  <span class="icon-name">sort_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_round_fill</i>
  <span class="icon-name">sort_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_up</i>
  <span class="icon-name">sort_up</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_up_round</i>
  <span class="icon-name">sort_up_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">sort_up_round_fill</i>
  <span class="icon-name">sort_up_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">star</i>
  <span class="icon-name">star</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">star_fill</i>
  <span class="icon-name">star_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">star_half</i>
  <span class="icon-name">star_half</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">star_round_fill</i>
  <span class="icon-name">star_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">stopwatch</i>
  <span class="icon-name">stopwatch</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">stopwatch_fill</i>
  <span class="icon-name">stopwatch_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tablet_landscape</i>
  <span class="icon-name">tablet_landscape</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tablet_portrait</i>
  <span class="icon-name">tablet_portrait</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tabs</i>
  <span class="icon-name">tabs</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tabs_fill</i>
  <span class="icon-name">tabs_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tag</i>
  <span class="icon-name">tag</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tag_fill</i>
  <span class="icon-name">tag_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tags</i>
  <span class="icon-name">tags</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tags_fill</i>
  <span class="icon-name">tags_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tape</i>
  <span class="icon-name">tape</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tape_fill</i>
  <span class="icon-name">tape_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">thumbs_down</i>
  <span class="icon-name">thumbs_down</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">thumbs_up</i>
  <span class="icon-name">thumbs_up</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">ticket</i>
  <span class="icon-name">ticket</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">ticket_fill</i>
  <span class="icon-name">ticket_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tickets</i>
  <span class="icon-name">tickets</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tickets_fill</i>
  <span class="icon-name">tickets_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">time</i>
  <span class="icon-name">time</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">time_fill</i>
  <span class="icon-name">time_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">timer</i>
  <span class="icon-name">timer</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">timer_fill</i>
  <span class="icon-name">timer_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">today</i>
  <span class="icon-name">today</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">today_fill</i>
  <span class="icon-name">today_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">trash</i>
  <span class="icon-name">trash</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">trash_fill</i>
  <span class="icon-name">trash_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tree</i>
  <span class="icon-name">tree</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tune</i>
  <span class="icon-name">tune</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">tune_fill</i>
  <span class="icon-name">tune_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">undo</i>
  <span class="icon-name">undo</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">unlock</i>
  <span class="icon-name">unlock</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">unlock_fill</i>
  <span class="icon-name">unlock_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">upload_round</i>
  <span class="icon-name">upload_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">upload_round_fill</i>
  <span class="icon-name">upload_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">videocam</i>
  <span class="icon-name">videocam</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">videocam_fill</i>
  <span class="icon-name">videocam_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">videocam_round</i>
  <span class="icon-name">videocam_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">videocam_round_fill</i>
  <span class="icon-name">videocam_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">volume</i>
  <span class="icon-name">volume</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">volume_fill</i>
  <span class="icon-name">volume_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">volume_low</i>
  <span class="icon-name">volume_low</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">volume_low_fill</i>
  <span class="icon-name">volume_low_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">volume_mute</i>
  <span class="icon-name">volume_mute</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">volume_mute_fill</i>
  <span class="icon-name">volume_mute_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">volume_off</i>
  <span class="icon-name">volume_off</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">waterdrop</i>
  <span class="icon-name">waterdrop</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">waterdrop_fill</i>
  <span class="icon-name">waterdrop_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">world</i>
  <span class="icon-name">world</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">world_fill</i>
  <span class="icon-name">world_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">zoom_in</i>
  <span class="icon-name">zoom_in</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-28">zoom_out</i>
  <span class="icon-name">zoom_out</span>
</div>
      </div>
    </div>
  </div>
  <div class="icon-preview">
    <div class="icon-preview-name">Icon: <b>home</b></div>
    <div class="icons">
      <div class="icon-cell">
        <div class="f7-icons size-14">home</div>
        <div class="icon-size">14px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-20">home</div>
        <div class="icon-size">20px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-24">home</div>
        <div class="icon-size">24px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-28">home</div>
        <div class="icon-size">28px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-32">home</div>
        <div class="icon-size">32px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-56">home</div>
        <div class="icon-size">56px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-112">home</div>
        <div class="icon-size">112px</div>
      </div>
    </div>
  </div>
  <script>
    var icons = document.querySelectorAll('.content .f7-icons');
    function showPreview(e) {
      var icon = e.target.textContent;
      var previewIcons = document.querySelectorAll('.icon-preview .f7-icons');
      for (var j = 0; j < previewIcons.length; j++) {
        previewIcons[j].textContent = icon;
      }
      document.querySelector('.icon-preview').style.display = 'block';
      document.querySelector('.icon-preview-name b').textContent = icon;
    }
    for (var i = 0; i < icons.length; i++) {
      icons[i].addEventListener('click', showPreview);
    }
  </script>
</body>
</html>